<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>乐分畅游</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/commen.css" />
		<style>
			.mui-bar-tab{
				background: #2e323c;
			}
			.mui-bar-tab .mui-tab-item img{
				width: 33px;
			}
			.mui-bar-tab .mui-tab-item:nth-child(2) img,.mui-bar-tab .mui-tab-item:nth-child(3) img{
				width: 39px;
			}
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="pages/home/index.html">
				<img class="show_img" src="img/tab/home.png" alt="" />
			</a>
			<a class="mui-tab-item" href="pages/recharge/index.html">
				<img class="show_img" src="img/tab/recharge.png" alt="" />
			</a>
			<a class="mui-tab-item" href="pages/gift/index.html">
				<img class="show_img" src="img/tab/gift.png" alt="" />
			</a>
			<a class="mui-tab-item" href="pages/my/index.html">
				<img class="show_img" src="img/tab/my.png" alt="" />
			</a>
		</nav>
		<div class="mui-content">
			<!--<div class="mui-iframe-wrapper" style="top: 45px; bottom: 51px;">
				<iframe src="pages/quotation/index.html" id="pages/quotation/index.html" name="pages/quotation/index.html"></iframe>
			</div>
			<div class="mui-iframe-wrapper" style="top: 45px; bottom: 51px;">
				<iframe src="pages/recharge/index.html" id="pages/recharge/index.html" name="pages/recharge/index.html"></iframe>
			</div>
			<div class="mui-iframe-wrapper" style="top: 45px; bottom: 51px;">
				<iframe src="pages/gift/index.html" id="pages/gift/index.html" name="pages/gift/index.html"></iframe>
			</div>
			<div class="mui-iframe-wrapper" style="top: 45px; bottom: 51px;">
				<iframe src="pages/my/index.html" id="pages/my/index.html" name="pages/my/index.html"></iframe>
			</div>-->
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			/*浏览器的兼容处理方法*/
			var createIframe = function (el, opt) {
			    var elContainer = document.querySelector(el);
			    var wrapper = document.querySelector(".mui-iframe-wrapper");
			    if(!wrapper){
			        // 创建wrapper 和 iframe
			        wrapper = document.createElement('div');
			        wrapper.className = 'mui-iframe-wrapper';
			        for(var i in opt.style){
			            wrapper.style[i] = opt.style[i];
			        }
			        var iframe = document.createElement('iframe');
			        iframe.src = opt.url;
			        iframe.id = opt.id || opt.url;
			        iframe.name = opt.id;
			        wrapper.appendChild(iframe);
			        elContainer.appendChild(wrapper);
			    }else{
			        var iframe = wrapper.querySelector('iframe');
			        iframe.src = opt.url;
			        iframe.id = opt.id || opt.url;
			        iframe.name = iframe.id;
			    }
			}
			
			// mui初始化
			mui.init();
			
			var subpages = ['pages/home/index.html', 'pages/recharge/index.html', 'pages/gift/index.html', 'pages/my/index.html'];
			var subpage_style = {
				top: '0px',
				bottom: '51px'
			};
			var aniShow = {};
			// 当前激活选项,从缓存中拿值
			if(localStorage.getItem('current_tab')!=undefined){
				var activeTab = localStorage.getItem('current_tab');
			}else{
				var activeTab = subpages[0];
			}
			changeActiveImg(activeTab);
			if(mui.os.plus){
				// 创建子页面，首个选项卡页面显示，其它均隐藏；
				mui.plusReady(function() {
					var self = plus.webview.currentWebview();
					for (var i = 0; i < 4; i++) {
						var temp = {};
						var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
						if (i > 0) {
							sub.hide();
						}else{
							temp[subpages[i]] = "true";
							mui.extend(aniShow,temp);
						}
						self.append(sub);
					}
				});
			}else{
				// 创建iframe代替子页面
		        createIframe('.mui-content',{
		            url: activeTab,
		            style: subpage_style
		        });
			}
			
			// 选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				localStorage.setItem('current_tab',targetTab);
				if (targetTab == activeTab) {return;}
				//显示目标选项卡
				if(mui.os.plus){
					//若为iOS平台或非首次显示，则直接显示
					if(mui.os.ios||aniShow[targetTab]){
						plus.webview.show(targetTab);
					}else{
						//否则，使用fade-in动画，且保存变量
						var temp = {};
						temp[targetTab] = "true";
						mui.extend(aniShow,temp);
						plus.webview.show(targetTab,"fade-in",300);
					}
					//隐藏当前;
					plus.webview.hide(activeTab);
				}else{
					// 创建iframe代替子页面
			        createIframe('.mui-content',{
			            url: targetTab,
			            style: subpage_style
			        });
				}
				//更改当前活跃的选项卡
				activeTab = targetTab;
				changeActiveImg(activeTab);
			});
			/*
			 * 修改选中状态图片
			 */
			function changeActiveImg(path){
				switch(path){
					case 'pages/home/index.html':
					var href_a = $("[href='pages/home/index.html']");
					href_a.addClass('mui-active').siblings().removeClass('mui-active');
					var nowSrc=href_a.children('.show_img').attr('src');
					href_a.siblings().each(function(){
						var otherSrc=$(this).children('.show_img').attr('src');
						$(this).children('.show_img').attr('src',changeImgTypeToPng(otherSrc))
					})
					href_a.children('.show_img').attr('src',changeImgTypeToGif(nowSrc));
					break;
					case 'pages/recharge/index.html':
					var href_a = $("[href='pages/recharge/index.html']");
					href_a.addClass('mui-active').siblings().removeClass('mui-active');
					var nowSrc=href_a.children('.show_img').attr('src');
					href_a.siblings().each(function(){
						var otherSrc=$(this).children('.show_img').attr('src');
						$(this).children('.show_img').attr('src',changeImgTypeToPng(otherSrc))
					})
					href_a.children('.show_img').attr('src',changeImgTypeToGif(nowSrc));
					break;
					case 'pages/gift/index.html':
					var href_a = $("[href='pages/gift/index.html']");
					href_a.addClass('mui-active').siblings().removeClass('mui-active');
					var nowSrc=href_a.children('.show_img').attr('src');
					href_a.siblings().each(function(){
						var otherSrc=$(this).children('.show_img').attr('src');
						$(this).children('.show_img').attr('src',changeImgTypeToPng(otherSrc))
					})
					href_a.children('.show_img').attr('src',changeImgTypeToGif(nowSrc));
					break;
					case 'pages/my/index.html':
					var href_a = $("[href='pages/my/index.html']");
					href_a.addClass('mui-active').siblings().removeClass('mui-active');
					var nowSrc=href_a.children('.show_img').attr('src');
					href_a.siblings().each(function(){
						var otherSrc=$(this).children('.show_img').attr('src');
						$(this).children('.show_img').attr('src',changeImgTypeToPng(otherSrc))
					})
					href_a.children('.show_img').attr('src',changeImgTypeToGif(nowSrc));
					break;
				}
			}
			/*
			 * 修改小数点后的类型
			 */
			function changeImgTypeToGif(str){
				return str.substr(0,str.length-3)+'gif';
			}
			function changeImgTypeToPng(str){
				return str.substr(0,str.length-3)+'png';
			}
		</script>
	</body>
</html>